<template>
	<view>
		<u-notice-bar :text="text1"></u-notice-bar>
		<view class="auth">
			<view class="infos">
				<view class="list">
					<text>称呼</text>
					<input placeholder="请输入您的称呼"
						placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
						border="surround" v-model="req.name" type="text"></input>
				</view>
				<view class="list">
					<text>手机号</text>
					<input placeholder="请输入您的手机号"
						placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
						border="surround" v-model="req.phone" type="number"></input>
				</view>
				<view class="list">
					<text>微信号</text>
					<input placeholder="请输入您的微信号"
						placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
						border="surround" v-model="req.wechat" type="text"></input>
				</view>
				<view class="list">
					<text>预约时间</text>
					<view class="_position" @click="showTime = true"></view>
					<input placeholder="请选择您的预约时间" border="surround" v-model="req.meet_time" type="text" disabled
						placeholder-style="pointer-events:none;font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"></input>
				</view>
				<view class="list">
					<text>预约地点</text>
					<view class="_position" @click="visible = true"></view>
					<input placeholder="请选择您的预约地点" border="surround" v-model="req.meet_name" type="text" disabled
						placeholder-style="pointer-events:none;font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"></input>
				</view>
				<view class="list">
					<text>详细地址</text>
					<input placeholder="请输入您的详细地址"
						placeholderStyle="font-size: 28rpx;color: #999999;line-height: 40rpx;font-family: PingFangSC-Regular;"
						border="surround" v-model="req.address" type="text"></input>
				</view>
				<view class="list">
					<text>预约事宜</text>
					<view class="tags_flex">
						<block v-for="(item,index) in tag" :key="index">
							<u-tag :text="item.tag" type="warning" shape="circle" v-if="item.isShow === true"
								@click="ItemTag(item,index)"></u-tag>
							<u-tag :text="item.tag" type="warning" shape="circle" plain v-if="item.isShow === false"
								@click="ItemTag(item,index)"></u-tag>
						</block>
					</view>
				</view>
				<view class="button" @click="save">
					<text>提交</text>
				</view>
			</view>
			<u-datetime-picker :show="showTime" v-model="TimeValue" mode="datetime" @confirm="confirm"
				@cancel="showTime = false"></u-datetime-picker>
			<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
				@confirm="PickerConfirm" @cancel="visible = false" :visible="visible" />
			<u-toast ref="uToast"></u-toast>
		</view>
		<kf-popup-qrcode ref="refpopupqrcode" style="width: 100%;"></kf-popup-qrcode>
	</view>
</template>

<script>
	import {
		uploadToQiniu
	} from '@/utils/qiniu';
	import {
		OrderCreate,
		gettags,
		getSystemConfig
	} from '@/api/user';
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				column: 3,
				visible: false,
				maskCloseAble: true,
				text1: '下单须知:本平台禁止黄赌毒禁止私下交易，预约地点不得填写宾馆酒店等敏感词汇！',
				showSex: false,
				showTime: false,
				defaultValue: '',
				TimeValue: Number(new Date()),
				tag: [],
				info: {},
				req: {
					id: '', //搭子id
					name: '', //名称
					phone: '', // 手机号
					wechat: '', //微信号
					meet_time: '', // 预约时间
					meet_name: '', // 预约地点
					meet_Matters: [], // 预约事宜
					address: '', //详细地址
				}
			}
		},
		onLoad(options) {
			this.req = {
				...this.req,
				...{
					id: options.id || ''
				}
			};
		},
		onShow() {
			this.gettags();
			this.getSystemConfig();
		},
		methods: {
			//选择预约时间
			confirm(e) {
				this.req = {
					...this.req,
					...{
						meet_time: this.timeStr(e.value) || ''
					}
				};

				this.showTime = false;
			},
			//选择的省市区
			PickerConfirm(e) {
				this.req = {
					...this.req,
					...{
						meet_name: e.name || ''
					}
				};
				this.visible = false;
			},
			timeStr(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear(); // 2025
				const month = date.getMonth() + 1; // 5 (注意月份从0开始)
				const day = date.getDate(); // 7
				const hours = date.getHours(); // 20 (UTC+8)
				const minutes = date.getMinutes(); // 11
				return `${year < 10 ? `0${year}` : year }-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day} ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}`
			},
			ItemTag(item, index) {
				this.$set(this.tag[index], 'isShow', this.tag[index].isShow = !this.tag[index].isShow);
			},
			/**
			@method 获取tag标签列表
			**/
			async gettags() {
				try {
					this.tag = [];
					const res = await gettags({
						page: 1,
						pageSize: 20,
					});

					if (res.code === 200) {
						for (var i = 0, len = res.data.data.length; i < len; i++) {
							this.tag.push({
								tag: res.data.data[i].tag,
								url: res.data.data[i].url,
								isShow: false,
							});
						}
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			//获取客服二维码手机号
			async getSystemConfig() {
				try {
					const res = await getSystemConfig({
						type: 'server'
					});

					if (res.code === 200) {
						this.info = {
							...res.data[0].partnerServer
						};
					}
				} catch (e) {
					//TODO handle the exception
					console.log(e);
				}
			},
			/** 
			@method 提交订单
			**/
			async save() {
				try {
					this.req = {
						...this.req,
						...{
							meet_Matters: this.tag.filter((v) => v.isShow === true)
						}
					};

					const res = await OrderCreate(this.req);

					if (res.code === 200) {
						this.$refs.refpopupqrcode.open({
							title: "温馨提示",
							content: "你好丫",
							cancelText: "错的",
							confirmText: "对的",
							ewm: this.info.qrcode1,
							ewm2: this.info.qrcode2,
							mobileList: [this.info.phone1, this.info.phone2],
							texttip: "长按识别二维码添加客服微信（不加客服等一会也会联系您哦！）"
						})
						// this.$refs.uToast.show({
						// 	type: "default",
						// 	title: "默认主题",
						// 	message: "下单成功请等待客服联系您！",
						// 	iconUrl: "https://uviewui.com/demo/toast/default.png",
						// 	complete() {
						// 		uni.reLaunch({
						// 			url: '/pages/tabBar/Home/index'
						// 		});
						// 	},
						// });
					}
				} catch (err) {
					console.log(err);
				}
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(to bottom, #ffaf32, #f7f8fa);
	}
</style>
<style lang="scss" scoped>
	.auth {
		width: 100%;
		height: auto;
		padding-bottom:30rpx;

		& text {
			font-family: PingFangSC-Regular, PingFang SC;
			color: #7C7597;
		}

		.text1 {
			display: block;
			font-size: 28rpx;
			margin-top: 40rpx;
			margin-bottom: 10rpx;
			color: red;
		}

		.text2 {
			display: block;
			font-size: 28rpx;
			color: red;
		}

		.infos {
			width: 95%;
			height: auto;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			padding: 30rpx 30rpx 30rpx 30rpx;
			margin: 0rpx auto;
			margin-top: 20rpx;

			.list {
				display: flex;
				flex-direction: column;
				padding: 30rpx 30rpx 0rpx 30rpx;
				position: relative;

				._position {
					width: 90%;
					height: 80rpx;
					position: absolute;
					background-color: transparent;
					bottom: 0rpx;
					z-index: 9999;
				}

				.tags_flex {
					width: 98%;
					margin: 0rpx auto;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					/deep/ .u-tag-wrapper {
						margin-right: 15rpx;
						margin-bottom: 15rpx;
					}
				}

				>text {
					font-size: 30rpx;
					font-weight: 600;
					color: #160651;
					line-height: 40rpx;
					margin-bottom: 14rpx;
				}

				>input {
					height: 80rpx;
					background: #F5F5FB;
					border-radius: 10rpx;
					padding-left: 32rpx;
				}

				.upload_new {
					width: auto;
					display: flex;
					align-items: center;
					// background: #F5F5FB;
					border-radius: 10rpx;
					padding: 0rpx 10rpx 10rpx 0rpx;

					// /deep/ .u-upload__wrap{
					// 	display: flex;
					// 	align-items: center;
					// }

					& image {
						width: 155rpx;
						height: 150rpx;
						// border:1px solid red;

					}

					>text {
						margin-top: 38rpx;
					}
				}

				.upload {
					display: flex;
					flex-direction: column;
					align-items: center;
					background: #F5F5FB;
					border-radius: 10rpx;
					padding: 50rpx 50rpx 30rpx 50rpx;

					& image {
						width: 488rpx;
						height: 264rpx;
					}

					>text {
						margin-top: 38rpx;
						letter-spacing: 2rpx;
					}
				}
			}
		}

		.button {
			width: 85%;
			display: flex;
			padding: 0rpx 0rpx 0rpx 0rpx;
			margin: 0rpx auto;
			margin-top: 50rpx;

			>text {
				width: 100%;
				height: 84rpx;
				background: #ffaf32;
				box-shadow: 0rpx 6rpx 30rpx 0rpx rgba(83, 60, 215, 0.4600);
				border-radius: 43rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 84rpx;
				text-align: center;
			}
		}

		.text {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 10rpx;
		}
	}
</style>